<template>
  <span
    :class="{
      'text-red': +num < 0,
      'text-green': +num > 0,
      '!text-[#111]': noColor
    }"
  >
    <template v-if="!locale">
      {{ parseFloat(String(currency(+num))) }}
    </template>
    <template v-else>
      {{ formatCurrency(+num) }}
    </template>
  </span>
</template>
<script setup lang="ts">
import { formatCurrency } from "@/utils/common";
import currency from "currency.js";

withDefaults(
  defineProps<{
    locale?: boolean;
    noColor?: boolean;
    num: number | string;
  }>(),
  {
    locale: true,
    noColor: undefined,
    num: 0
  }
);
</script>
